<template>
	<view>
		<view class="con_top">
			<text>注册</text>
			<text>遇见相似的灵魂</text>
		</view>
		<view class="list_form">
			<u-steps :list="numList" mode="dot" direction="column"></u-steps>
			<view class="con_form">
				<u-form :model="form" ref="uForm">
					<text>用户名:</text>
					<u-form-item>
						<u-input v-model="form.userName" placeholder="请输入用户名" input-align="center" height="30" />
					</u-form-item>
					<view style="height: 5rpx;"></view>
					<text>密码:</text>
					<u-form-item>
						<u-input v-model="form.password" placeholder="请输入密码" input-align="center" height="30" :type="type" :password-icon="false"/>
					</u-form-item>
					<view style="height: 5rpx;"></view>
					<text>确认密码:</text>
					<u-form-item>
						<u-input placeholder="请再次输入密码" input-align="center" height="30" :type="type" :password-icon="false"/>
					</u-form-item>
					<view style="height: 5rpx;"></view>
					<text>用户昵称:</text>
					<u-form-item>
						<u-input v-model="form.nickname" placeholder="请输入昵称" input-align="center" height="30" />
					</u-form-item>
					<view style="height: 5rpx;"></view>
					<text>年龄:</text>
					<u-form-item>
						<u-input v-model="form.age" placeholder="请输入年龄" input-align="center" height="30" />
					</u-form-item>
					<view style="height: 5rpx;"></view>
					<text>邮箱:</text>
					<u-form-item>
						<u-input v-model="form.email" placeholder="请输入邮箱" input-align="center" height="30" />
					</u-form-item>
					<view style="height: 5rpx;"></view>
					<text>电话号码:</text>
					<u-form-item>
						<u-input v-model="form.telephoneNumber" placeholder="请输入电话号码" input-align="center"
							height="30" />
					</u-form-item>

				</u-form>
			</view>


		</view>
		<u-button class="custom-style" shape="circle" @click="submit">注册</u-button>
		<u-divider color="#9A9A9A" border-color="#6d6d6d" bg-color="#f2f3f7">您可以选择以下方式登录</u-divider>
		<view class="con_icon">
			<view>
				<image src="../../static/images/navigation/wx.png"></image>
			</view>
			<view>
				<image src="../../static/images/navigation/qq.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numList: [{
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}, ],
				form: {
					userName: '',
					password: '',
					age: '',
					email: '',
					telephoneNumber: '',
					icon: '../../../static/images/desire/tx.png',
					nickname: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				},
				type:'password',
			};
		},
		methods: {
			submit() {
				// console.log(this.form);
				// uni.request({

				// 	url: 'http://192.168.159.1:8080/users/save',
				// 	method: 'POST',
				// 	header: {
				// 		'content-type': "application/json"
				// 	},
				// 	data:this.form,
				// 	success: res => {
				// 		console.log(res)
				// 		uni.reLaunch({
				// 			url: "/pages/index/login"
				// 		})
				// 	},
				// 	fail: () => {
				// 		console.log('err', err)
				// 		uni.showToast({
				// 			title: "服务器响应失败，请稍后再试！",
				// 			icon: "error"
				// 		});
				// 	},
				// 	complete: () => {}
				// })
				console.log(this.form);
				this.$sendRequest({
					url: "/users/save",
					method: 'POST',
					data: this.form,
					success: (res) => {
						this.realBusStatus = res.data
						uni.reLaunch({
							url: "/pages/index/login"
						})
					}
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.con_top {
		padding: 40rpx;
		margin-bottom: 30rpx;
		display: flex;
		width: 100%;
		height: 180rpx;
		background-color: #fffffd;
		border-radius: 0px 0px 80px 0px;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5);
		opacity: 0.8;
	}

	.con_top text:first-child {
		margin-top: 25rpx;
		font-size: 60rpx;
		font-weight: bold;
		font-family: my-font;
		color: #7a90fd;
	}

	.con_top text:nth-child(2) {
		margin-left: 15rpx;
		margin-top: 60rpx;
		font-size: 28rpx;
		font-family: my-font;
		color: #7a90fd;
	}

	.list_form {
		display: flex;
		flex-direction: row;
		padding-left: 40rpx;
	}

	.con_form {
		margin-top: 40rpx;
	}

	.con_form text {
		color: #9A9A9A;
	}

	.u-form-item {
		width: 540rpx;
		background-color: #fffffd;
		border-radius: 5px 30px 5px 5px;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5);
	}

	.con_icon {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.con_icon view {
		margin: 40rpx;
		width: 90rpx;
		height: 90rpx;
		border-radius: 20rpx;
		box-shadow: 2px 2px 3px 3px rgba(230, 234, 246, 1);
		padding: 15rpx;
	}

	.con_icon image {
		width: 65rpx;
		height: 65rpx;
	}
</style>

<style scoped>
	.custom-style {
		margin-top: 70rpx;
		margin-bottom: 20rpx;
		background-color: #4b5ad9;
		color: white;
		width: 80%;
	}

	.custom-style2 {
		margin-top: 70rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		color: #4b5ad9;
		width: 80%;
		border: 1px solid #4b5ad9;
	}
</style>
